A bezier curve is a powerful tool
to create complex drawings and is defined by a start point, end point and two control
points. To learn the mathematics behind bezier curves, go here. Learning the mathematics
can be helpful if you want to do animations involving bezier curves.
The bezierCurveTo method makes it easy to draw a bezier curve on the canvas. The
method requires a first control point (controlPointX1,
controlPointX2) , a second control point (controlPointX2, controlPointY2) and the
end point (x,y) of the curve.
If you are drawing a string of paths to form
a complex shape, the start point of a bezier
curve is defined by the end point of the previous path. Otherwise, you can specify
the start point using the moveTo method.
Visualizing how a bezier curve
will turn out on the screen is slightly complex but not impossible. The important
thing is to practice moving the two control points to get an idea of how they affect
the curve.
One way to visualize how the curve will turn out is to draw a line from the start
point to the first control point and another line from the end point to the second
control point. The bezier curve will begin at the start point, move in the direction
of the first control point (The line from the start point to the first control point
will be a tangent to the slope of the curve) and arrive at the end point from the
direction of the second control point (the line from the end point to the second
control point will be a tangent to the slope of the curve).
processing.org has a neat simulation that can give you a good idea of how control
points affect the curve.
Required Methods
You will need the following methods to draw an arc.
strokeStyle:
This method can be used to define the colour of any figure drawn on the canvas. Here, we will use it to define the colour of the curve
we are about to draw.
beginPath():
Calling this method will initialize a path. The path can be closed later with the
endPath() method and filled or stroked with the required colour. Without initializing
and closing a path, you will be unable to fill or stroke particular areas or lines
with specific colours.
moveTo():
This method is used to move the cursor/pen to a particular point on the canvas.
Here, the moveTo point will indicate the beginning of the bezier curve.
This method defines the bezier curve, with the first control point at (controlPointPointX1,
controlPointY1), second control point at (controlPointPointX2, controlPointY2)and
end point (endPointX, endPointY).
stroke():
This method
draws the actual bezier curve.
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
//define the colour of the line.
ctx.strokeStyle = "green";
//Move to the beginning of the curve (100,100).
ctx.moveTo(100,100);
//Draw a line from the beginning point of the curve to the first control point (25,25).
//This line is only to help you visualize the curve easily.
ctx.lineTo(25,25);
ctx.stroke();
// Draw a line from the end point of the curve to the second control point(200,25)
// Again, this is only to help you visualize the curve easily.
ctx.moveTo(300,100);
ctx.lineTo(200,25);
ctx.stroke();
// Move to the beginning of the curve to (100,100) again, this time to draw the bezier
curve
ctx.moveTo(100,100);
ctx.strokeStyle = "red";
//define the bezier curve.
ctx.bezierCurveTo( 25,25,200,25,300,100)
